<template>
    <div>
        <template>
            <el-form :inline="true" :model="editdata" :rules="projectEditFormRules" ref="editdata">
                <h3>
                    基本信息
                </h3>
                <div class="mt-20">
                    <div class="clearfix">
                        <div class="fl">
                            <div>
                                <el-form-item label="悬赏名称：" prop="name">
                                    <el-input v-model="editdata.name"></el-input>
                                </el-form-item>
                            </div>
                        </div>
                        <div class="fl">
                            <div>
                                <el-form-item label="赏金：" prop="bounty">
                                    <el-input v-model="editdata.bounty"></el-input>
                                </el-form-item>
                            </div>
                        </div>
                        <div class="fl">
                            <div>
                                <el-form-item label="项目周期：" prop="expectedDuration" >
                                    <el-input v-model="editdata.expectedDuration"></el-input>
                                </el-form-item>
                                <el-form-item >
                                    <div class="edit-day">
                                        天
                                    </div>
                                </el-form-item>
                            </div>
                        </div>
                    </div>
                    <div class="pl-10">
                        <div class="skills <mt-></mt->20">
                            <el-form-item label="技能要求：" prop="skills" style="width:100%">
                                    <el-select v-model="editdata.skillList" multiple filterable allow-create placeholder="请输入标签">
                                        <el-option v-for="item in editdata.skillList" :key="item.type" :label="item.skill" :value="item.type">
                                        </el-option>
                                    </el-select>
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <h3>需求描述</h3>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <div class="editor-wrapper">
                              <el-form-item label="" prop="prd" >
                                <div class="editor-content">
                                    <tinymce :height=200 ref="editor" v-model="editdata.prd"></tinymce>
                                </div>
                          </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <div>
                <h3>附件</h3>
                    <div class="padding-20">
                        <router-link :to="item.path" v-for = "item in editdata.attachmentList">
                            <span>{{item.name}}</span>
                        </router-link>
                    </div>
                    <el-upload
                    class="upload-demo mt-20"
                    drag
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </div>
                <div class="mt-20">
                    <h3>联系信息</h3>
                    <div class="mt-20">
                        <el-form-item label="联系人" prop="contact.linkman">
                            <el-input v-model="editdata.contact.linkman"></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话" prop="contact.mobile">
                            <el-input v-model="editdata.contact.mobile"></el-input>
                        </el-form-item>
                        <el-form-item label="电子邮箱" prop="contact.email">
                            <el-input v-model="editdata.contact.email"></el-input>
                        </el-form-item>
                    </div>
                    <div class="text-center mt-30">
                        <el-form-item>
                            <el-button type="primary" @click="submitProjectEditForm('editdata')">确认</el-button>
                            <el-button  @click="back">取消</el-button>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </template>
    </div>
</template>

<script>
    import tinymce from '@/components/public/tinymce/index.vue'
    import {getRewardDetail, managerModify} from '@/api/reward.js'
    export default {
        created () {
            let req = {
                id: this.$route.query.id
            }
            getRewardDetail(req).then(data => {
                this.editdata = data.data.data
                console.log(this.editdata)
            })
        },
        data () {
            // 手机号码验证
            let checkPhone = (rule, value, callback) => {
                let pattern = /(13\d|14\d|15\d|17\d|18\d)\d{8}/
                if (value) {
                    if (!pattern.test(value) || value.length !== 11) {
                        return callback(new Error('请输入正确的11位手机号码'))
                    } else {
                        callback()
                    }
                } else {
                    callback()
                }
            }
            // 邮箱验证
            let checkEmail = (rule, value, callback) => {
                let pattern = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/
                if (value) {
                    if (!pattern.test(value)) {
                        return callback(new Error('请输入正确的电子邮箱地址'))
                    } else {
                        callback()
                    }
                } else {
                    callback()
                }
            }
            return {
                // 编辑数据对象
                editdata: {
                    name: '',
                    bounty: '',
                    expectedDuration: '',
                    skillList: [],
                    attachmentList: [],
                    contact: {
                        linkman: '',
                        mobile: '',
                        email: ''
                    }
                },
                skillList: [],
                // 校验规则
                projectEditFormRules: {
                    name: [
                        {required: true, message: '请输入名称'}
                    ],
                    bounty: [
                        {required: true, message: '请输入赏金'}
                    ],
                    expectedDuration: [
                        {required: true, message: '请输入日期'}
                    ],
                    'contact.linkman': {
                        required: true,
                        message: '联系人信息',
                        trigger: 'blur'
                    },
                    'contact.mobile': [{
                        required: true,
                        message: '请填写联系电话',
                        trigger: 'blur'
                    },
                    {
                        validator: checkPhone,
                        trigger: 'blur'
                    }
                    ],
                    'contact.email': [{
                        required: true,
                        message: '请填写电子邮箱',
                        trigger: 'blur'
                    },
                    {
                        validator: checkEmail,
                        trigger: 'blur'
                    }]
                }
            }
        },
        methods: {
            // 校验编辑表单
            submitProjectEditForm: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let attachmentList = []
                        let skills = []
                        for (let i = 0; i < this.editdata.skillList; i++) {
                            attachmentList.push(this.editdata.skillList[i].type)
                            skills.push(this.editdata.skillList[i].skill)
                        }
                        let req = {
                            id: this.editdata.id,
                            managerId: this.$store.getters.userId,
                            name: this.editdata.name,
                            cycle: this.editdata.expectedDuration,
                            cycleName: 'day',
                            isTendencyDistrict: this.editdata.isTendencyDistrict,
                            tendencyType: this.editdata.tendencyType,
                            status: this.editdata.status,
                            prd: this.editdata.prd,
                            linkman: this.editdata.contact.linkman,
                            mobile: this.editdata.contact.mobile,
                            email: this.editdata.contact.email,
                            skillTypes: attachmentList,
                            skills: skills,
                            attachmentList: this.editdata.attachmentList
                        }
                        managerModify(req).then(data => {
                            this.$message('保存成功')
                            history.back()
                        })
                    }
                })
            },
            // 返回
            back () {
                history.back()
            }
        },
        components: {
            tinymce
        }
    }

</script>

<style scoped>
    .editor-content {
        margin-top: 20px;
        width: 100%;
    }
    .padding-20{
        padding: 20px 0
    }
    .edit-day{
        width: 30px;
        height: 30px;
        border: 1px solid #bfcbd9;
        border-radius: 5px;
        text-align: center
    }
    .pl-10{
        padding-left: 10px; 
    }
</style>
